import React from 'react';
import { FormattedMessage } from 'umi';
import { Link }  from 'umi';
import { connect } from 'umi';
import PageHeader from '@/components/PageHeader';
import MenuContext from '@/layouts/MenuContext';
import { pageTabs } from '@/defaultSettings';
import GridContent from './GridContent';
import styles from './index.less';

const PageHeaderWrapper = ({ children, contentWidth, wrapperClassName, top, ...restProps }) => (
    <div style={{ width: '100%' }} className={wrapperClassName}>
        {top}
        {!pageTabs && (
            <MenuContext.Consumer>
                {value => (
                    <PageHeader
                        wide={contentWidth === 'Fixed'}
                        home={<FormattedMessage id="menu.home" defaultMessage="Home" />}
                        {...value}
                        key="pageheader"
                        {...restProps}
                        linkElement={Link}
                        // breadcrumbSeparator={'>'}
                        itemRender={item => {
                            if (item.locale) {
                                return <FormattedMessage id={item.locale} defaultMessage={item.title} />;
                            }
                            return item.title;
                        }}
                    />
                )}
            </MenuContext.Consumer>
        )}
        {children ? (
            <div className={styles.content}>
                <GridContent>{children}</GridContent>
            </div>
        ) : null}
    </div>
);

export default connect(({ setting }) => ({
    contentWidth: setting.contentWidth
}))(PageHeaderWrapper);
